<template>
	<view class="wrapper">
		<!-- <view class="header"></view> -->
		<view class="info content-box card pd-30">
			<view class="avatar-box">
				<image :src="userInfo.avatar || avatar" class="avatar" />
			</view>
			<view class="info-c">
				<view class="nick-name">{{ login && userInfo ? userInfo.nickName || userInfo.phone || '饭点点' : "饭点点" }}</view>
			</view>
		</view>
		<view class="card order-entry content-box" @tap="toMyOrders">
			<view class="entry-field">
				<view class="left">
					<view class="icon">
						<image :src="orderIcon" class="icon-img" />
					</view>
					<view class="title">最近一周的订单</view>
				</view>
				<view class="right-icon"><uni-icons type="forward" size="30"></uni-icons></view>
			</view>
		</view>
		<view v-for="item in list" :key="item.id" class="code-item card content-box">
			<!-- <view class="desc">取货号</view> -->
			<view class="code-row">
				<view class="code">
					<view class="txt">{{ item.pickups }}</view>
					<!-- <view class="desc-txt">（货柜层数）</view> -->
				</view>
			</view>
			<view class="fields">
				<view class="code-field">
					<view class="code-field-label">取货地址:</view>
					<view class="code-field-value">
						<view class="txt">{{ item.address }}</view>
					</view>
				</view>
				<view class="code-field">
					<view class="code-field-label">取货时间:</view>
					<view class="code-field-value">
						<view class="date-txt">
							<view class="date">{{item.pickupTime}}</view> 
							<view class="week" v-if="item.pickupTime">({{ getWeek(item.pickupTime) }})</view>
						</view>
					</view>
				</view>
				<view class="code-field">
					<view class="code-field-label">商品明细:</view>
					<view class="code-field-value">
						<view class="txt" v-for="product in (item.commodities || [])" :key="product.id">
							{{ product.commodityName }} x {{ product.nums }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fill-box"></view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		isLogin,
		getWeiXinCode,
		wxLogin,
		todayIsLogin
	} from "@/common/util";
	import {
		onShow,
		onShareAppMessage, onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		setStorage,
		getStorage
	} from "@/common/storage";
	import orderIcon from "@/static/icons/order-icon.svg";
	import avatar from "@/static/icons/avatar.svg";
	import dayjs from "dayjs";

	const molds = 2;
	const userInfo = ref({});
	const login = ref(isLogin());
	const list = ref([]);
	const containerId = ref(getStorage('containerId'));

	const getWeek = (date) => {
		if (!date) {
			return "";
		}
		const maps = {
			0: "星期日", 
			1: '星期一',
			2: '星期二',
			3: '星期三',
			4: '星期四',
			5: '星期五',
			6: '星期六',
			7: '星期日',
		}
		return date ? maps[dayjs(date).day()] : "";
	}
	const toMyOrders = () => {
		uni.navigateTo({
			url: "/pages/mine/orders"
		});
	}

	const updateUserInfo = async () => {
		try {
			const data = await uni.$request.get(uni.$api.customerInfo);
			userInfo.value = data || {};
			// setStorage("userInfo", userInfo.value);
		} catch (error) {
			console.error("error:", error);
		}
	}
	const fetchOrderList = async () => {
		try {
			const data = await uni.$request.get(uni.$api.orderPage, {
				data: {
					page: 1,
					size: 3,
					molds,
					pay: 1,  // 已支付的订单
					containerId: containerId.value, // 货柜ID
				}
			});
			if (data && data.dataList && data.dataList.length > 0) {
				list.value = data.dataList;
			} else {
				list.value = [];
			}
		} catch (error) {
			console.error("error:", error);
		}
	}

	onShareAppMessage (() => {
		return {
      title: '点餐就免单！不玩套路！',
      path: `/pages/orders/index?userId=${userInfo.id}&containerId=${containerId.value}`
    }
	});
	onShareTimeline (() => {
		return {
      title: '点餐就免单！不玩套路！',
      path: `/pages/orders/index?userId=${userInfo.id}&containerId=${containerId.value}`
    }
	});

	onShow(() => {
		if (todayIsLogin) {
			updateUserInfo();
			fetchOrderList();
		} else {
			getWeiXinCode((code) => {
				wxLogin(code, {containerId: getStorage('containerId')}).then((tokenObj) => {
					setStorage("token", tokenObj.tokenValue);
					setStorage("lastLoginTime", dayjs(new Date()).format("YYYY-MM-DD"));
					login.value = true;
					updateUserInfo();
					fetchOrderList();
				});
			});
		}
	});
</script>
<style lang="scss" scoped>
	.card {
		box-sizing: border-box;
		border-radius: 23upx;

		&.pd-30 {
			padding: 30upx;
		}
	}

	.field {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper {
		width: 100%;
		height: 100vh;

		.header {
			width: 100%;
			height: 175upx;
			background-color: #fff;
		}

		.info {
			border-radius: 23upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: #fff;
			margin-top: 24upx;

			.avatar-box {
				border: solid 1rpx #eee;
				border-radius: 50%;
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				overflow: hidden;

				.avatar {
					width: 120upx;
					height: 120upx;
				}
			}

			.info-c {
				flex: 1;
				margin-left: 30upx;

				.nick-name {}
			}
		}

		.order-entry {
			margin-top: 24upx;
			background-color: #fff;

			.entry-field {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30upx;
				box-sizing: border-box;

				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.icon-img {
						width: 42upx;
						height: 42upx;
					}

					.title {
						margin-left: 10upx;
						line-height: 42upx;
					}
				}
			}
		}

		.code-item {
			margin-top: 24upx;
			background-color: #fff;
			padding: 30upx;
			box-sizing: border-box;

			.desc {
				color: #1f1f11;
				font-size: 24upx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				text-align: center;
			}

			.code-row {
				display: flex;
				justify-content: center;
				align-items: center;

				.code {
					width: auto;
					position: relative;

					.txt {
						font-size: 60upx;
						color: #1f1f11;
						font-style: normal;
						font-weight: bold;
						line-height: normal;
						text-align: center;
						position: relative;
						min-height: 60upx;
					}

					.desc-txt {
						position: absolute;
						width: 200upx;
						left: -100upx;
						top: 80upx;
						z-index: 1;

						color: #1f1f11;
						font-size: 30upx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						text-align: center;
					}
				}
			}

			.fields {
				margin-top: 80upx;

				.code-field {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					margin-bottom: 20upx;
					padding-left: 30upx;
					box-sizing: border-box;

					.code-field-label {
						color: #1F1F1F;
						font-size: 28upx;
						font-style: normal;
						font-weight: 400;
						line-height: 40upx;
					}

					.code-field-value {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;
						
						.txt {
							color: #1F1F1F;
							font-size: 28upx;
							font-style: normal;
							font-weight: 700;
							line-height: 34upx;
							margin-left: 40upx;
						}
						.date-txt {
							display: flex;
							justify-content: flex-start;
							margin-left: 40upx;
							.date {
								color: #1F1F1F;
								font-size: 28upx;
								font-style: normal;
								font-weight: 700;
								line-height: 34upx;
							}
							.week {
								color: #FF4D56;
								font-size: 28upx;
								font-style: normal;
								font-weight: 700;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}
			}
		}

		.fill-box {
			height: 30upx;
		}
	}
</style>